<template>
  <ui-dialog class="vx-ac-bank-qry" :visible.sync="isDialog" width="65%" title="开户行查询" center append-to-body @close="close">
    <ui-form ref="openBank" :rules="openBankRules" :model="openBank" label-width="120px">
      <vx-form-container>
        <ui-form-item prop="searchType" label="查询方式">
          <ui-radio-group v-model="openBank.searchType" @change="changeType">
            <ui-radio label="bankBranch"
              ><ui-link :type="openBank.searchType === 'bankBranch' ? 'primary' : 'default'" :underline="false">按银行网点查询</ui-link></ui-radio
            >
            <ui-radio label="keyWord"
              ><ui-link :type="openBank.searchType === 'keyWord' ? 'primary' : 'default'" :underline="false">按关键字查询</ui-link></ui-radio
            >
          </ui-radio-group>
        </ui-form-item>
        <ui-form-item prop="drawerAc" label="出票人账号" v-if="openBank.searchType === 'bankBranch'" v-loading="isBankLoading">
          <ui-select
            :popper-append-to-body="false"
            size="large"
            v-model="openBank.bank"
            placeholder="选择银行"
            class="mg-bt-10"
            @change="getProviceList"
          >
            <ui-option v-for="(item, index) in bankList" :key="index" :label="item.bankName" :value="item.unionNum"></ui-option>
          </ui-select>
          <div class="province mg-bt-10" v-loading="isProviceLoading">
            <ui-select :popper-append-to-body="false" size="large" v-model="openBank.province" placeholder="省" @change="getCityList">
              <ui-option v-for="(item, index) in proviceList" :key="index" :label="item.ProvinceName" :value="item.ProvinceCode"></ui-option>
            </ui-select>
            <ui-select :popper-append-to-body="false" size="large" v-model="openBank.city" placeholder="市" @change="getBanch">
              <ui-option v-for="(item, index) in cityList" :key="index" :label="item.CityName" :value="item.CityCode"></ui-option>
            </ui-select>
          </div>
          <ui-select :popper-append-to-body="false" size="large" v-model="branch.bankName" placeholder="关联回显" v-loading="isBtnLoading">
            <ui-option v-for="(item, index) in branchList" :key="index" :label="item.bankName" :value="item.bankName"></ui-option>
          </ui-select>
        </ui-form-item>
        <ui-form-item label="开户行信息" prop="acBank" v-else>
          <ui-input v-model="openBank.acBank" placeholder="输入部分开户行名称或完整联行号" class="search-num">
            <ui-button slot="append" class="primary-btn mg-lt-8" @click="searchInfo">查询</ui-button>
          </ui-input>
        </ui-form-item>
        <ui-table
          class="mg-bt-20"
          :data="branchList"
          v-if="openBank.searchType === 'keyWord'"
          highlight-current-row
          @current-change="selectedRow"
          v-loading="isBtnLoading"
        >
          <ui-table-column min-width="147" label="选择">
            <template slot-scope="scope">
              <ui-radio v-model="bankSelected" :label="scope.$index">{{ '' }}</ui-radio>
            </template>
          </ui-table-column>
          <ui-table-column label="银行机构" prop="bankName" min-width="403"></ui-table-column>
          <ui-table-column label="联行号" prop="unionNum" min-width="285"></ui-table-column>
        </ui-table>
        <ui-form-item label=" " v-if="openBank.searchType === 'bankBranch'">
          <ui-button class="default-btn" @click="back">返回</ui-button>
          <ui-button class="primary-long-btn" @click="confirm">确认</ui-button>
        </ui-form-item>
      </vx-form-container>
    </ui-form>
    <div slot="footer" v-if="openBank.searchType === 'keyWord'">
      <ui-button class="default-btn" @click="back">返回</ui-button>
      <ui-button class="primary-long-btn" @click="confirm">确认</ui-button>
    </div>
  </ui-dialog>
</template>

<script>
import componentsApi from '@/api/components.js';
export default {
  name: 'vxAcBankQry',
  props: {
    isOpen: {
      default: false,
      type: Boolean,
    },
  },
  watch: {
    isOpen(val) {
      this.isDialog = val;
    },
  },
  data() {
    return {
      isDialog: this.isOpen,
      isBankLoading: false, // 银行查询
      isProviceLoading: false, // 省市加载
      isBtnLoading: false, // 查询按钮加载
      openBank: {
        searchType: 'bankBranch',
        drawerAc: '',
        acBank: '', // 用户输入查询信息
        bank: '',
        province: '',
        city: '',
      },
      branch: {
        bankName: '',
        unionNum: '',
      },
      openBankRules: {
        searchType: [{ required: true, message: '请选择查询方式', trigger: 'blur' }],
        drawerAc: [{ required: true, message: '请选择出票人账号', trigger: 'blur' }],
        acBank: [{ required: true, message: '请输入开户行名称或者完整联行号', trigger: 'blur' }],
      },
      bankList: [],
      bankSelected: -1,

      proviceList: [],
      cityList: [],
      branchList: [],
    };
  },
  mounted() {
    this.getBankList();
  },
  methods: {
    /**
     * @description 切换查询条件 - 网点查询/关键字查询
     */
    changeType(label) {
      if (label === 'keyWord') {
        this.getBanch();
      } else {
        this.$refs['openBank'].clearValidate();
      }
    },
    /**
     * @description 选择某一行
     */
    selectedRow(row) {
      this.branch = row;
      this.bankSelected = this.branchList.indexOf(row);
    },
    /**
     * @description 根据输入的关键字进行查询
     */
    searchInfo() {
      this.$refs['openBank'].validate((valid) => {
        if (valid) {
          this.getBanch(this.openBank.acBank);
        }
      });
    },
    /**
     * @description 获取银行列表
     */
    async getBankList() {
      try {
        this.isBankLoading = true;
        let res = await componentsApi.getDrawerAc();
        this.bankList = res.listBank;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isBankLoading = false;
      }
    },
    /**
     * @description 查询省会
     */
    async getProviceList() {
      // 加载省市数据
      try {
        this.isProviceLoading = true;

        let res = await componentsApi.getProvinceQry();
        this.proviceList = res.list;
        this.openBank.drawerAc = '';
        this.openBank.province = '';
        this.openBank.city = '';
        this.branch = {
          bankName: '',
          unionNum: '',
        };
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isProviceLoading = false;
      }
    },
    /**
     * @description 根据省会 - 查询城市
     */
    async getCityList() {
      if (!this.openBank.province) {
        return [];
      }
      this.openBank.drawerAc = '';
      this.openBank.city = '';
      this.branch = {
        bankName: '',
        unionNum: '',
      };
      this.cityList = this.proviceList.find((province) => {
        return province.ProvinceCode == this.openBank.province;
      }).ProvinceList;
    },
    /**
     * @description 查询出票人支行信息
     */
    async getBanch(data = undefined) {
      try {
        this.isBtnLoading = true;

        const res = await componentsApi.getDrawerAc(data || this.openBank);
        this.branchList = res.list;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isBtnLoading = false;
      }
    },
    /**
     * @description 返回并清除
     */
    back() {
      this.$refs['openBank'].resetFields();
      this.isDialog = false;
    },
    /**
     * 确认并清除数据
     */
    confirm() {
      if (this.branch.bankName) {
        this.$emit('getBranch', this.branch);
        this.back();
      } else {
        this.$message.error('请选择开户行');
      }
    },
    /**
     * @description Dialog 关闭的回调
     */
    close() {
      this.$emit('close', false);
    },
  },
};
</script>

<style lang="scss">
.vx-ac-bank-qry {
  .ui-form-item {
    padding-right: 72px;
  }
  .ui-form-item__label {
    padding-right: 35px;
  }
  .province {
    display: flex;
    justify-content: space-between;
    .ui-select {
      width: 145px;
      .ui-input__inner {
        width: 100%;
      }
    }
  }
  .search-num {
    .ui-input__inner {
      margin-right: 8px;
    }
  }
}
</style>
